<template>
    <div class="assessment">
        <!-- <div class="header"> -->
        <el-card shadow="never">
            <!-- <div class="top"> -->
            <el-form label-width="80px" :inline="true" :model="formData">
                <el-form-item label="商品名称:">
                    <el-input v-model="formData.productName" size="mini"></el-input>
                </el-form-item>
                <!-- <el-form-item label="商品分类:">
                    <el-input v-model="formData.categoryId" size="mini"></el-input>
                </el-form-item> -->
                <el-form-item label="标签:">
                    <el-input v-model="formData.productLabel" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="商品是否上架:" label-width="110px" :label-position="left">
                    <el-select v-model="formData.itemStatus" size="mini">
                        <el-option v-for="item in  
                        [{
                            value: 1,
                            label: '已上架'
                        }, {
                            value: 2,
                            label: '已下架'
                        }]
                        " :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="search" size="mini">搜索</el-button>
                </el-form-item>
                <!-- @click="add" -->
                <el-form-item style="float: right;">
                    <el-button type="primary" size="mini" @click="add">添加商品</el-button>
                </el-form-item>

            </el-form>
            <!-- </div> -->
        </el-card>
        <!-- </div> -->
        <!-- <div class="footer"> -->
        <el-card shadow="never" style="margin-top: 20px;">
            <!-- 表格 -->
            <el-table border :data="tableData" style="width: 100%">
                <el-table-column prop="productPhoto" label="图片" align="center">
                    <template slot-scope="scope">
                        <img style="width: 30px;height: 30px;" :src="'data:image/png/jpg;base64,' + scope.row.productPhoto"
                            alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="商品名称" align="center">
                </el-table-column>
                <el-table-column prop="categoryId" label="商品分类" align="center" width="100px">
                    <template slot-scope="scope">
                        <span v-if="scope.row.categoryId === 1">Experts</span>
                        <span v-if="scope.row.categoryId === 2">Indicators</span>
                        <span v-if="scope.row.categoryId === 3">Trading Strategy</span>
                        <span v-if="scope.row.categoryId === 4">Risk Control Assistance</span>
                    </template>
                </el-table-column>
                <el-table-column prop="creationTime" label="创建时间" align="center" width="180px">
                </el-table-column>
                <el-table-column prop="originalPrice" label="商品原价" align="center">
                </el-table-column>
                <el-table-column prop="preferentialPrice" label="优惠价" align="center" width="70px">
                </el-table-column>
                <el-table-column prop="qualityGrade" label="推荐指数" align="center">
                </el-table-column>
                <el-table-column prop="platformsUsed" label="平台" align="center">
                </el-table-column>
                <el-table-column prop="varietiesUsed" label="品种" align="center">
                </el-table-column>
                <el-table-column prop="version" label="版本" align="center">
                </el-table-column>
                <el-table-column prop="productLabel" label="标签" align="center">
                </el-table-column>
                <!-- 1已上架  2已下架 -->
                <el-table-column prop="itemStatus" label="状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.itemStatus === 1">已上架</span>
                        <span v-if="scope.row.itemStatus === 2">已下架</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="Etid(scope.row)">修改</el-button>
                        <el-button size="mini" type="text" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <paging :page-size="formData.pageSize" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-card>
        <!-- </div> -->
        <!-- 添加商品弹框pc -->
        <el-dialog class="dialogadd" title="添加商品" :visible.sync="dialogFormVisible">
            <el-row>
                <el-col :span="24">
                    <el-form :model="form" label-position="top" :rules="rules" ref="form">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="商品名称" prop="productName">
                                    <el-input v-model="form.productName" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="商品分类" prop="categoryId">
                                    <el-select v-model="form.categoryId" size="mini" placeholder="请选择">
                                        <el-option v-for="item in shopClassify" :key="item.id" :label="item.categoryName"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="原价" prop="originalPrice">
                                    <el-input v-model="form.originalPrice" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="优惠价" prop="preferentialPrice">
                                    <el-input v-model="form.preferentialPrice" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="推荐指数" prop="qualityGrade">
                                    <el-rate v-model="form.qualityGrade" size="mini"></el-rate>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="上传图片" prop="productPhoto">
                                    <el-upload class="upload-demo"
                                        :action="basePathAdmin + '/cryptocurrency/pingTbConfirmCode'"
                                        :on-success="handleSuccess" :on-error="handleError" :auto-upload="true"
                                        :file-list="fileList" drag :headers="header" v-model="form.fileList" :limit="1"
                                        :data="data">
                                        <i class="el-icon-upload"></i>
                                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品介绍" prop="description">
                                    <el-input v-model="form.description" type="textarea" class="full-width-textarea"
                                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="平台" prop="platformsUsed">
                                    <el-input v-model="form.platformsUsed" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="品种" prop="varietiesUsed">
                                    <el-input v-model="form.varietiesUsed" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="版本" prop="version">
                                    <el-input v-model="form.version" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12">
                                <el-form-item label="标签">
                                    <el-input v-model="form.productLabel" size="mini"></el-input>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品描述" prop="descriptionDetailed">
                                    <el-input v-model="form.descriptionDetailed" type="textarea"
                                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品信息" prop="additionalInfo">
                                    <el-input v-model="form.additionalInfo" type="textarea"
                                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品标签（必须以逗号分隔）" prop="productLabel">
                                    <el-input v-model="form.productLabel" size="mini" class="fullInput"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>


                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品链接" prop="productLink">
                                    <el-col :span="24">
                                        <el-input v-model="form.productLink" size="mini" class="fullInput"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <!-- <el-for-item>
                    <el-upload class="upload-demo" action="http://192.168.1.94:8080/admin/account/uploadFacePhoto"
                        :on-change="handleChange" :file-list="fileList" :headers="headers">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-for-item> -->

                        <!-- <el-upload class="upload-demo" action="https://bsatrader.com/admin/account/uploadFacePhoto"
                    :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :data="data"
                    accept="jpg,png" :headers="headers">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload> -->

                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品状态" prop="itemStatus">
                                    <el-radio-group v-model="form.itemStatus">
                                        <el-radio label="1">已上架</el-radio>
                                        <el-radio label="2">已下架</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="subimt">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加商品弹框 手机端 -->
        <el-dialog class="dialogadd" title="添加商品" :visible.sync="dialogFormVisibleC">
            <el-form :model="form" label-position="top" :rules="rules" ref="form">
                <el-form-item label="商品名称" prop="productName">
                    <el-input v-model="form.productName" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" prop="categoryId">
                    <el-select v-model="form.categoryId" size="mini" placeholder="请选择">
                        <el-option v-for="item in shopClassify" :key="item.id" :label="item.categoryName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="原价" prop="originalPrice">
                    <el-input v-model="form.originalPrice" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="优惠价" prop="preferentialPrice">
                    <el-input v-model="form.preferentialPrice" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="推荐指数" prop="qualityGrade">
                    <el-rate v-model="form.qualityGrade" size="mini"></el-rate>
                </el-form-item>
                <el-form-item label="上传图片" prop="productPhoto">
                    <el-upload class="upload-demo" :action="basePathAdmin + '/cryptocurrency/pingTbConfirmCode'"
                        :on-success="handleSuccess" :on-error="handleError" :auto-upload="true" :file-list="fileList" drag
                        :headers="header" v-model="form.fileList" :limit="1" :data="data">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品介绍" prop="description">
                    <el-input v-model="form.description" type="textarea" class="full-width-textarea"
                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                </el-form-item>
                <el-form-item label="平台" prop="platformsUsed">
                    <el-input v-model="form.platformsUsed" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="品种" prop="varietiesUsed">
                    <el-input v-model="form.varietiesUsed" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="版本" prop="version">
                    <el-input v-model="form.version" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" prop="descriptionDetailed">
                    <el-input v-model="form.descriptionDetailed" type="textarea"
                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                </el-form-item>
                <el-form-item label="商品信息" prop="additionalInfo">
                    <el-input v-model="form.additionalInfo" type="textarea"
                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                </el-form-item>
                <el-form-item label="商品标签（必须以逗号分隔）" prop="productLabel">
                    <el-input v-model="form.productLabel" size="mini" class="fullInput"></el-input>
                </el-form-item>
                <el-form-item label="商品链接" prop="productLink">

                    <el-input v-model="form.productLink" size="mini" class="fullInput"></el-input>

                </el-form-item>

                <el-form-item label="商品状态" prop="itemStatus">
                    <el-radio-group v-model="form.itemStatus">
                        <el-radio label="1">已上架</el-radio>
                        <el-radio label="2">已下架</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close" size="mini">取 消</el-button>
                <el-button type="primary" @click="subimt" size="mini">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改商品弹框 -->
        <el-dialog class="dialogEtid" title="修改商品" :visible.sync="dialogFormVisibleEtid">
            <el-row>
                <el-col :span="24">
                    <el-form :model="form" label-position="top" :rules="rules" ref="form">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="商品名称" prop="productName">
                                    <el-input v-model="form.productName" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="商品分类" prop="categoryId">
                                    <el-select v-model="form.categoryId" size="mini" placeholder="请选择">
                                        <el-option v-for="item in shopClassify" :key="item.id" :label="item.categoryName"
                                            :value="item.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="原价" prop="originalPrice">
                                    <el-input v-model="form.originalPrice" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="优惠价" prop="preferentialPrice">
                                    <el-input v-model="form.preferentialPrice" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="推荐指数" prop="qualityGrade">
                                    <el-rate v-model="form.qualityGrade" size="mini"></el-rate>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="上传图片" prop="productPhoto">
                                    <el-upload class="upload-demo"
                                        :action="basePathAdmin + '/cryptocurrency/pingTbConfirmCode'"
                                        :on-success="handleSuccess" :on-error="handleError" :auto-upload="true"
                                        :file-list="fileList" drag :headers="header" v-model="form.fileList" :limit="1"
                                        :data="data">
                                        <i class="el-icon-upload"></i>
                                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                                    </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品介绍" prop="description">
                                    <el-input v-model="form.description" type="textarea" class="full-width-textarea"
                                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="平台" prop="platformsUsed">
                                    <el-input v-model="form.platformsUsed" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="品种" prop="varietiesUsed">
                                    <el-input v-model="form.varietiesUsed" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="版本" prop="version">
                                    <el-input v-model="form.version" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12">
                                <el-form-item label="标签">
                                    <el-input v-model="form.productLabel" size="mini"></el-input>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品描述" prop="descriptionDetailed">
                                    <el-input v-model="form.descriptionDetailed" type="textarea"
                                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品信息" prop="additionalInfo">
                                    <el-input v-model="form.additionalInfo" type="textarea"
                                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品标签（必须以逗号分隔）" prop="productLabel">
                                    <el-input v-model="form.productLabel" size="mini" class="fullInput"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>


                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品链接" prop="productLink">
                                    <el-col :span="24">
                                        <el-input v-model="form.productLink" size="mini" class="fullInput"></el-input>
                                    </el-col>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="商品状态" prop="itemStatus">
                                    <el-radio-group v-model="form.itemStatus">
                                        <el-radio :label="1">已上架</el-radio>
                                        <el-radio :label="2">已下架</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeEdit">取 消</el-button>
                <el-button type="primary" @click="subimtEdit">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改商品弹框  手机端-->
        <el-dialog class="dialogEtid" title="修改商品" :visible.sync="dialogFormVisibleEtidC">
            <el-form :model="form" label-position="top" :rules="rules" ref="form">
                <el-form-item label="商品名称" prop="productName">
                    <el-input v-model="form.productName" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" prop="categoryId">
                    <el-select v-model="form.categoryId" size="mini" placeholder="请选择">
                        <el-option v-for="item in shopClassify" :key="item.id" :label="item.categoryName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="原价" prop="originalPrice">
                    <el-input v-model="form.originalPrice" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="优惠价" prop="preferentialPrice">
                    <el-input v-model="form.preferentialPrice" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="推荐指数" prop="qualityGrade">
                    <el-rate v-model="form.qualityGrade" size="mini"></el-rate>
                </el-form-item>
                <el-form-item label="上传图片" prop="productPhoto">
                    <el-upload class="upload-demo" :action="basePathAdmin + '/cryptocurrency/pingTbConfirmCode'"
                        :on-success="handleSuccess" :on-error="handleError" :auto-upload="true" :file-list="fileList" drag
                        :headers="header" v-model="form.fileList" :limit="1" :data="data">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品介绍" prop="description">
                    <el-input v-model="form.description" type="textarea" class="full-width-textarea"
                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                </el-form-item>
                <el-form-item label="平台" prop="platformsUsed">
                    <el-input v-model="form.platformsUsed" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="品种" prop="varietiesUsed">
                    <el-input v-model="form.varietiesUsed" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="版本" prop="version">
                    <el-input v-model="form.version" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" prop="descriptionDetailed">
                    <el-input v-model="form.descriptionDetailed" type="textarea"
                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                </el-form-item>
                <el-form-item label="商品信息" prop="additionalInfo">
                    <el-input v-model="form.additionalInfo" type="textarea"
                        :autosize="{ minRows: 5, maxRows: 10 }"></el-input>
                </el-form-item>
                <el-form-item label="商品标签（必须以逗号分隔）" prop="productLabel">
                    <el-input v-model="form.productLabel" size="mini" class="fullInput"></el-input>
                </el-form-item>
                <el-form-item label="商品链接" prop="productLink">
                    <el-col :span="24">
                        <el-input v-model="form.productLink" size="mini" class="fullInput"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="商品状态" prop="itemStatus">
                    <el-radio-group v-model="form.itemStatus">
                        <el-radio :label="1">已上架</el-radio>
                        <el-radio :label="2">已下架</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="closeEdit" size="mini">取 消</el-button>
                <el-button type="primary" @click="subimtEdit" size="mini">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 删除的对话框 -->
        <el-dialog title="删除" :visible="showVisible" width="30%" :before-close="handleClose">
            <div style="text-align: center;line-height: 30px">
                <span style="font-size: 16px;">你确定要删除这个商品吗？</span>
            </div>

            <el-row type="flex" justify="center" style="margin-top: 20px;">
                <el-button size="mini" @click="handleClose">取 消</el-button>
                <el-button size="mini" type="primary" @click="delBtnOK">确 定</el-button>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
import paging from '@/components/paging.vue'
import { getData, getCategory, addCommodity, updateCommodity, delCommodity } from "@/api/shop.js";
import { TOKEN_KEY } from "@/constants/KEY";
import Cookies from "js-cookie";
import baseData from '@/baseData'

export default {
    name: 'VueAdminIndex',
    components: {
        paging
    },
    // 响应式数据
    data() {
        return {
            basePathAdmin:baseData.basePathAdmin,
            header: {
                Authentication: Cookies.get(TOKEN_KEY)
            },
            tableData: [],
            // 搜索数据
            formData: {
                productName: null,
                // categoryId: null,
                itemStatus: null,
                productLabel: null,
                page: 1,
                pageSize: 5,
            },
            page: {
                page: 1,
                pageSize: 5,
            },
            total: null,
            dialogFormVisible: false,
            dialogFormVisibleC: false,
            // 弹框表单数据
            form: {
                productName: null,   // 商品名称
                categoryId: null,     // 商品唯一编码
                itemStatus: null,    // 状态
                productLabel: null,  // 标签
                originalPrice: null,  // 商品原价 
                preferentialPrice: null, // 商品优惠价
                qualityGrade: null, //星星
                description: null, // 商品介绍
                platformsUsed: null, // 平台
                varietiesUsed: null, //品种
                version: null,//版本
                descriptionDetailed: null,//详细描述
                additionalInfo: null,//额外信息
                productLink: null,//产品链接
                productPhoto: null, //图片B64码

            },
            // headers: {
            //     'authentication': getToken()
            // },
            data: {
                faceImage: ""
            },
            fileList: [],
            shopClassify: [],
            dialogFormVisibleEtid: false,
            dialogFormVisibleEtidC: false,
            rules: {
                productName: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                ],
                categoryId: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                itemStatus: [
                    { required: true, message: '请选择商品状态', trigger: 'blur' },
                ],
                productLabel: [
                    { required: true, message: '请输入商品标签', trigger: 'blur' },
                ],
                originalPrice: [
                    { required: true, message: '请输入商品原价', trigger: 'blur' },
                ],
                preferentialPrice: [
                    { required: true, message: '请输入商品优惠价', trigger: 'blur' },
                ],
                qualityGrade: [
                    { required: true, message: '请选择推荐指数', trigger: 'change' },
                ],
                description: [
                    { required: true, message: '请输入商品介绍', trigger: 'blur' },
                ],
                platformsUsed: [
                    { required: true, message: '请输入商品平台', trigger: 'blur' },
                ],
                varietiesUsed: [
                    { required: true, message: '请输入商品品种', trigger: 'blur' },
                ],
                version: [
                    { required: true, message: '请输入商品版本', trigger: 'blur' },
                ],
                descriptionDetailed: [
                    { required: true, message: '请输入商品详细描述', trigger: 'blur' },
                ],
                additionalInfo: [
                    { required: true, message: '请输入商品额外信息', trigger: 'blur' },
                ],
                productLink: [
                    { required: true, message: '请输入商品链接', trigger: 'blur' },
                ],
                productPhoto: [
                    { required: true, message: '请上传商品图片', trigger: 'blur' },
                ],

            },
            showVisible: false,
            id: null,
        }
    },
    methods: {
        // // 获取数据
        async initData() {
            const res = await getData(this.formData)
            this.tableData = res.records
            this.total = res.total
        },
        // 搜索
        search() {
            this.formData.page = 1
            const params = this.formData
            this.initData(params)
            // this.initData({ ...this.formData, ...this.page })
        },
        // 创建公共请求方法 
        // async putlicInitData(params) {
        //     console.log(JSON.stringify(params))
        //     const res = await getData(params)
        //     this.tableData = res.records
        //     this.total = res.total
        // },
        // search() {
        //     const params = this.formData
        //     this.putlicInitData(params)
        // },
        // async search() {
        //     const params = this.formData
        //     const res = await getData(params)
        //     this.tableData = res.records
        //     this.total = res.total
        // },
        // 分页方法
        handleSizeChange(val) {
            this.formData.pageSize = val
        },
        handleCurrentChange(val) {
            this.formData.page = val
            this.initData({ ...this.formData, ...this.page })
        },
        // 添加商品
        add() {
            if (this.getWidth <= 768) {
                this.dialogFormVisibleC = true
            } else {
                this.dialogFormVisible = true
            }
            // 清空from
            this.clearFrom()


            getCategory().then(res => {
                this.shopClassify = res
                console.log(res)
            })

        },
        // 弹框确定
        async subimt() {
            await this.$refs.form.validate()
            await addCommodity(this.form).then(res => {
                console.log(res)
                this.$message({
                    type: 'success',
                    message: res.paymentResult,
                })
            })
            if (this.getWidth <= 768) {
                this.dialogFormVisibleC = false
            } else {
                this.dialogFormVisible = false
            }
            this.initData()
            this.$refs.form.resetFields()
            this.fileList = []
            // this.$refs.form.validate((valid) => {
            //     if (valid) {

            //     } else {
            //         return false;
            //     }
            // })

        },
        // 弹框取消
        close() {
            if (this.getWidth <= 768) {
                this.dialogFormVisibleC = false
            } else {
                this.dialogFormVisible = false
            }
        },
        clearFrom() {
            this.form = {
                productName: null,   // 商品名称
                categoryId: null,     // 商品唯一编码
                itemStatus: null,    // 状态
                productLabel: null,  // 标签
                originalPrice: null,  // 商品原价 
                preferentialPrice: null, // 商品优惠价
                qualityGrade: null, //星星
                description: null, // 商品介绍
                platformsUsed: null, // 平台
                varietiesUsed: null, //品种
                version: null,//版本
                descriptionDetailed: null,//详细描述
                additionalInfo: null,//额外信息
                productLink: null,//产品链接
                productPhoto: null, //图片B64码
            }
        },
        // // 上传图片
        // handleRemove(file, fileList) {
        //     console.log(file, fileList);
        // },
        // handlePreview(file) {
        //     this.data.faceImage = file
        // },
        // 上传图片
        handleSuccess(response, file, fileList) {
            console.log(response, fileList, 'cc');
            this.fileList = fileList
            console.log(response.data.paymentResult, '????')

            this.form.productPhoto = response.data.paymentResult
        },

        // 点击修改
        Etid(row) {
            console.log(row, 'rw')
            if (this.getWidth <= 768) {
                this.dialogFormVisibleEtidC = true
            } else {
                this.dialogFormVisibleEtid = true
            }

            // this.form = row
            this.form.productName = row.productName,
                this.form.categoryId = row.categoryId,     // 商品唯一编码
                this.form.itemStatus = row.itemStatus,    // 状态
                this.form.productLabel = row.productLabel,  // 标签
                this.form.originalPrice = row.originalPrice,  // 商品原价 
                this.form.preferentialPrice = row.preferentialPrice, // 商品优惠价
                this.form.qualityGrade = row.qualityGrade, //星星
                this.form.description = row.description, // 商品介绍
                this.form.platformsUsed = row.platformsUsed, // 平台
                this.form.varietiesUsed = row.varietiesUsed, //品种
                this.form.version = row.version,//版本
                this.form.descriptionDetailed = row.descriptionDetailed,//详细描述
                this.form.additionalInfo = row.additionalInfo,//额外信息
                this.form.productLink = row.productLink,//产品链接
                this.form.productPhoto = row.productPhoto, //图片B64码
                this.id = row.id,
                // if (row.categoryId === 1) {
                //     this.form.categoryId = "Experts"
                // } else if (row.categoryId === 2) {
                //     this.form.categoryId = "Indicators"
                // } else if (row.categoryId === 3) {
                //     this.form.categoryId = "Trading Strategy"
                // } else if (row.categoryId === 4) {
                //     this.form.categoryId = "Risk Control Assistance"
                // }
                console.log(row, 'row');
        },

        // 确定修改
        subimtEdit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    console.log(this.form, 'form')
                    console.log("id", this.id)
                    const fromAndId = {
                        id: this.id,
                        ...this.form
                    }

                    updateCommodity(fromAndId).then(res => {
                        console.log(res, 'res')
                        if (res.paymentResult === '商品修改成功!') {
                            this.$message({
                                message: res.paymentResult,
                                type: 'success'
                            })
                            this.initData()
                        } else {
                            this.$message({
                                message: res.paymentResult,
                                type: 'error'
                            })
                        }


                    })

                    if (this.getWidth <= 768) {
                        this.dialogFormVisibleEtidC = false
                    } else {
                        this.dialogFormVisibleEtid = false
                    }

                } else {
                    return false;
                }
            })
        },
        // 取消修改
        closeEdit() {
            if (this.getWidth <= 768) {
                this.dialogFormVisibleEtidC = false
            } else {
                this.dialogFormVisibleEtid = false
            }
        },

        // 删除
        del(row) {
            this.id = row.id
            this.showVisible = true
            console.log(row, 'ss')
        },
        // 取消
        handleClose() {
            this.showVisible = false
        },
        // 确定删除
        delBtnOK() {
            delCommodity({ id: this.id }).then(res => {
                this.$message({
                    message: res.paymentResult,
                    type: 'success'
                })
                this.initData()
            })
            this.showVisible = false
            this.initData()
        }

    },
    // 组件挂载完毕执行
    mounted() {
        this.initData({ ...this.page })
        console.log(this.getWidth, 'getWidth')
    },
    computed: {
        getWidth() {
            return window.innerWidth
        }
    }
}
</script>
<style scoped lang="scss">
.fullInput ::v-deep .el-input__inner {
    width: 100%
}

::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

// .full-width-textarea::v-deep(.el-textarea__inner) {
//     width: 100%;
//     min-height: 200px;
//     /* 可选，设置最小高度 */
// }


// ::v-deep .el-rate {
//     line-height: 2.8;
// }
</style>
